<template>
  <view class="page-items">
	  <!-- <view wx:if="{{noData}}" class="nodata">没有搜到相关商品，为你推荐以下商品</view> -->
	  <view class="search-input">
	  	<icon type="search" size="15" style="padding-top:15rpx"/>
	  	<input class="search" @confirm="searchData" type="text" v-model="dname" confirm-type="search" placeholder="请输入商品或店铺名" />
	  	<icon type="clear" size="15" @click="clearSearch" style="padding-top:15rpx;flex:1;text-align: right;"/>
	  </view>
	  
	  <view class="catecss">
	  	<u-tabs :list="cateList" @click="tabClick"></u-tabs>
	  </view>
	<block v-for="(data,index) in items" :key="index">
		<view class="gsss">
			<u-row  gutter="10">
			    <u-col span="3" @click="goGoodsDe(data)"> 
				   <image v-if="data.restShopDishes.dimg" mode="aspectFill" style="width:100%;height:5rem;border-radius: 20rpx;"  :src="uploadFilePath+data.restShopDishes.dimg"></image>
				   <image v-else mode="aspectFill" style="width:100%;height:5rem;"  :src="`${picUrl}goods.png`"></image>
			    </u-col>
			    <u-col span="5"  @click="goGoodsDe(data)">
					<view style="font-weight:bold">{{data.dishesName}}</view>
					  <!-- <u-icon :name="data.iscollect==0?'heart':'heart-fill'" size="25" color="#ff0000"></u-icon> -->
			
					<view style="color:#666"><text decode>{{data.restShopDishes.restUserShop.shopName}}</text></view>
					<view class="dpdz">{{data.restShopDishes.restUserShop.shopAdd}}</view>
			    </u-col>
			    <u-col span="3" offset="1">
				   <u-icon :name="data.isflag==0?'star':'star-fill'" size="25" color="#ff0000" style="margin-left:60upx" @click="addCollect(data)"></u-icon>
				   <view style="margin-top:0.5rem;margin-left:40upx;font-weight:bold;">
				   	￥{{data.restShopDishes.dprice}}
				   </view>
				  <view>
					   <u-icon  name="plus-circle-fill" size="25" color="#04743a"  @click="openCart(data)" style="margin-top:0.5rem;margin-left:60upx;"></u-icon>
				   </view>
				</u-col>
			</u-row>
		  </view>
		</block>
		<u-popup :show="ggpopup" :round="10" mode="center" closeOnClickOverlay  @open="openTset" @close="ggpopup = false">
			<view style="padding:20upx">
				<view>{{rowData.dname}}</view>
				<view v-for="(item,index) in specData" style="display:flex;margin-top:20upx">
					<view>{{item.speType}}:</view>
					<view v-for="(it,idx) in item.detail" style="display:flex;padding-left:10upx;">
						<u-button :color="`${it.speId == item.checkVal?'#f9ae3d':'#666'}`" size="mini" :text="it.speTypeItem" style="padding-left:10upx;color:#000000" @click="choseSpec(idx,it.speId)"></u-button>
					</view>
				</view>
				<view style="margin:20upx;font-size:1rem">已选规格：{{checkSpec}}</view>
				<u-button type="warning" text="加入购物车" @click="addCart(2)"></u-button>
			</view>
		</u-popup>
		<u-modal :show="delState" :title="dtitle" @confirm="clearCart" @cancel="closeMd" :content='content' showConfirmButton showCancelButton></u-modal>
  </view>
</template>
<script>
  import Config from '@/util/index.js'
  import {
   saveCart,cartList,delCart
  } from '@/api/cart'
  import {
   getGoodsType
  } from '@/api/goods'
  import {
   saveCollect,updataCollect,collectList,delCollect
  } from '@/api/collect'
  export default {
    name: "Page",
	data() {
	  return {
		items:[],
		content:'是否取消收藏',
		dtitle:'取消收藏',
		specData:[],
		checkSpec:'',
		dname:'',
		dtype:'',
		userId:'',
		dishesname:'',
		rcode:'',
		boxVals:[],
		rowData:{},
		checkData:[],
		cartData:[],
		cateList:[],
		checkIdData:[],
		checked:true,
		delState:false,
		scode:'',
		ocid:'',
		show:false,
		rcode:'',
		shopId:'',
		total:0,
		numval:1,
		jbnum:2,
		pagenum:1,
		pagesize:10,
		activeBtn:0,
		cartPopup:false,
		noData:false,
		ggpopup:false,
		moreData:false,
	    uploadFilePath:''
	  }
	},
	onLoad(options) {
		let _this = this
		this.userId = uni.getStorageSync("userId")
		let deptDas = uni.getStorage({
			key: 'deptdas',
			success: function (res) {
				let depts = JSON.parse(res.data)
				_this.scode = depts.scode
				_this.rcode = depts.rcode			
			}
		})
		this.getCate()
	},
	onReachBottom() {
		this.pagenum++
		this.getPageData()
	},
	methods:{
		closeMd(){
			this.delState = false
		},
		clearSearch(){
			this.dname=""
			this.pagenum = 1
			this.getPageData();
		},
		tabClick(val){
			this.cindex = val.value
			this.dtype = this.optionsCate[this.cindex].value
			this.pagenum = 1
			this.getPageData();
		},
		getCate() {
			const app = this
			getGoodsType().catch(result => {
				let type = []
				result.data.rows.map(item => {
					let obj = {}
					obj.name = item.dtypeName
					app.cateList.push(obj)
					obj.value = item.dtype
					type.push(obj)
				})
				app.optionsCate = type
			})
		},
		searchData(){
			this.items = []
			this.pagenum = 1
			this.getPageData();
		},
		goGoodsDe(data){
			// this.$navTo(`./goods/detail`, { goodsId })
			uni.navigateTo({
				url: `../../goods/detail?gid=${data.dishesId}`
			})
		},
		addCollect(row){
			this.ocid = row.coId
			this.delState = true
		},
		choseSpec(cid,id){
			this.activeBtn = cid
			this.specData.forEach((item,idx)=>{
				item.detail.forEach(it=>{			
					if(id == it.speId){
						item.checkVal = id
						this.checkData[idx] = it.speTypeItem
						this.checkIdData[idx] = it.speId
					}
				})
			})
			this.checkSpec = this.checkData.toString()
		},
		clearCart(){
			delCollect(this.ocid).catch(res => {
				if(res.data.code == 200){
					this.delState = false
					uni.showToast({
					  title:"取消成功",
					  icon: 'none',
					  duration: 2000
					});
					this.getPageData()
				}
			})
		},
		openTset(){},
		addCart(type){
			let _this = this
			//添加购物车
			let params = {
				ocartId:"",
				userId:this.userId,
				shopId:_this.rowData.shopId,
				dishesId:_this.rowData.dishesId,
				dprice:_this.rowData.dprice,
				buyNum:1,
				deptId:_this.rcode,
				// speIds:_this.rowData.restShopDisheSpecs.length==0?"":_this.checkIdData.toString(),
				isflag:1
			}
			if(_this.rowData.restShopDishes.dprice){
				saveCart(params).catch(resp => {
					if(resp.data.code == 200){
						uni.showToast({
							title:"加入成功",
							icon: 'none',
							duration: 2000
						});
					}
				})
			}else{
				uni.showToast({
					title:"该商品未定价，不能售卖",
					icon: 'none',
					duration: 2000
				});
			}
		},
		openCart(row){
			this.rowData = row
			this.addCart(1)
		},
		getPageData() {
			uni.showLoading({
				title: '加载中...',
			})
			let params = {
				deptId: this.rcode,
				userId:this.userId,
				dname: this.dname,
				dtype: this.dtype,
				pageNum: this.pagenum,
				pageSize: this.pagesize
			}
			collectList(params).catch(res => {
				if(res.data.rows.length > 0){
					uni.hideLoading()
					const newList = res.data.rows
					this.total = parseInt(res.data.total)
					if(this.items.length < this.total){
						this.items = [...this.items, ...newList]
					}else{
						this.moreData = true
					}
				}else{
					uni.hideLoading()
					if(this.pagenum==1){
						this.noData = true
					}
					this.moreData = true
					uni.showToast({
						title:"暂无数据",
						icon: 'none',
						duration: 2000
					});
				}
			})
		}
	},
	created(){
		let _this = this
		uni.getStorage({
			key: 'deptdas',
			success: function (res) {
				let depts = JSON.parse(res.data)
				_this.scode = depts.scode
				_this.rcode = depts.rcode			
				_this.getPageData()
			}
		})
	},
	onShow(){
		console.log("xxxsssfgg")
		// this.getPageData("","",1,10)
		this.uploadFilePath = Config.get('apiUrl')
	}
  }
</script>
<style>
  .page-items{font-size:1rem;}
  .gsss{height:200rpx;margin:10rpx auto;background-color: #fff;padding:20rpx 20rpx 0rpx 20rpx}
  .jsdiv{
	  width:90%;height:100upx;border-radius: 50px;border:1px solid #f5f5f5;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);display: flex;justify-content: space-between;
	  margin:20upx auto;
  }
  .search-input {
    color: #999;
    padding: 20rpx;
    background: #f1f1f2;
    display: flex;
  }
   .search-input .search-icon {
      margin-right: 8rpx;
    }
  .jbcss{width:15upx;margin-left:30px;position:absolute;z-index: 10;}
  .botcart{height:60upx;line-height:60upx;padding:20upx;display:flex;justify-content: space-between;border-bottom:1px solid #f5f5f5}
  .jxbtn{width:150upx;height:100upx;font-size:18px;line-height:100upx;text-align: center;
  background-color:#04743a;color:#fff;border-top-right-radius: 50px;border-bottom-right-radius: 50px;}
  .utag{width:auto;height:1rem;border: 1px solid #F66;font-size: 0.8rem;padding:0.2rem;border-radius: 10px;margin-right:0.5rem}
</style>
